<template>
  <div class="main">
    <el-form class="btn_con" v-model="form" label-width="100px">
      <el-row gutter="8">
        <el-col :span="16">
        </el-col>
        <el-col :span="8" class="add_btn">
          <el-button @click="handleAdd" type="primary">新增模版</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table element-loading-svg-view-box="0, 0, 1024, 1024" :element-loading-svg="LoadingSvg" :data="tableData" border style="width: 100%" :height="tableHeight" v-loading="loading">
        <el-table-column prop="title" width="200" label="标题" />
        <el-table-column prop="content" label="内容">
          <template #default="{ row }">
            <span v-html="row.content"></span>
          </template>
        </el-table-column>  
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="scope">
            <el-button plain type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button plain type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_con">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :total="pagination.total"
          small background layout="prev, pager, next"
        />
      </div>
    </div>
    <AddModal ref="AddModalRef" :data="form" @close="handlerClose" />
  </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, defineAsyncComponent } from 'vue';
import api from '/@/api/email/index';
import { LoadingSvg } from '/@/utils/loading';
import { useEmail } from '/@/stores/email';
import pinia from '/@/stores';

defineOptions({ name: 'template' })

const AddModal = defineAsyncComponent(() => import('./addModal.vue'));

const tableData = ref([]);
const tableHeight = ref(500);
const AddModalRef = ref()

const form = ref<any>({});
const queryForm = ref<any>({});
const loading = ref(false);
const stores = useEmail(pinia);

const pagination = ref({
  page: 1,
  size: 10,
  total: 0
});

const getList = async () => {
  const account = stores.curAccount;
  loading.value = true;
  try {
    const res = await api.template.getList({
      emailAccount: account,
      pageNum: pagination.value.page,
      pageSize: pagination.value.size,
      ...queryForm.value
    });
    loading.value = false;
    if (res.code === 200) {
      tableData.value = res.data;
      pagination.value.total = res.total;
    } 
  } catch {
    loading.value = false;
  }
};

const handleDel = async (row: any) => {
  ElMessageBox.confirm('确认删除吗?', { cancelButtonText: '取消', confirmButtonText: '确认' }).then(async () => {
    const res = await api.template.del(row.id);
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '操作成功' });
      getList();
    }
  });
};

const handleEdit = (row: any) => {
  AddModalRef.value.showDialog = true
  form.value = { ...row };
};


const handleAdd = () => {
  AddModalRef.value.showDialog = true
  form.value = { 
    emailAccount: stores.curAccount
  };
};

const handlerClose = async (refresh?: boolean) => {
  AddModalRef.value.showDialog = false
  if (refresh) {
    if (form.value.id) {
      const res = await api.client.getDetail(form.value.id);
      if (res.code === 200) {
        const item: any = tableData.value.find((item: any) => item.id === form.value.id);
        if (item) {
          Object.assign(item, res.data);
        } else {
          getList();
        }
      }
    } else {
      getList();
    }
  }
};

const handleCurrentChange = (page: number) => {
  pagination.value.page = page;
  getList();
};

// const getDict = async () => {
//   const res = await commonApi.getDictData('inquiry_status');
//   if (res.code === 200) {
//     inquiryStatusList.value = res.data;
//     inquiryStatusMap.value = inquiryStatusList.value.reduce((obj: any, item) => {
//       obj[item.dictSort] = item.dictLabel;
//       return obj;
//     }, {});
//   }
// };

onMounted(() => {
  getList();
  // getDict();

  const setTableHeight = () => {
    tableHeight.value = window.innerHeight - 120 // 80 为顶部距离，根据实际情况设置
  }
  setTableHeight()
  window.addEventListener('resize', setTableHeight);
});
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  padding: 20px;
}

.pagination_con {
  display: flex;
  justify-content: end;
  padding: 10px;
  background: #fff;
}

.btn_con {
  padding: 7px 10px;
}

.add_btn {
  display: flex;
  justify-content: right;
  align-items: center;
}
</style>
  